<template>
  <view class="my-rankings-page">
    <view :class="['fade-in-all', showAll ? 'show' : '']">
      <view class="tab-bar">
        <view :class="['tab-btn', activeTab === 0 ? 'active' : '']" @click="activeTab = 0">我的得分</view>
        <view :class="['tab-btn', activeTab === 1 ? 'active' : '']" @click="activeTab = 1">我的排行</view>
      </view>
      <view v-if="activeTab === 0">
        <view v-if="scoreRankData?.myself" class="my-average-score">
          平均得分：<text class="avg-score-value">{{ scoreRankData.myself.score }}</text>
        </view>
        <!-- 我的得分列表（美化版） -->
        <view v-for="item in myScoreList" :key="item.id" class="score-item">
          <view class="score-header">
            <text class="score-customer">{{ item.customerName }}</text>
            <text class="score-time">{{ item.careStartTime }} ~ {{ item.careEndTime }}</text>
          </view>
          <view class="score-details">
            <text class="score-label">护理内容：</text>
            <text>{{ item.careDetails }}</text>
          </view>
          <view class="score-details" v-if="item.evaluation">
            <text class="score-label">评价：</text>
            <text>{{ item.evaluation }}</text>
          </view>
          <view class="score-metrics">
            <view>服务态度：<text class="score-value">{{ item.attitudeScore }}</text></view>
            <view>专业技能：<text class="score-value">{{ item.skillScore }}</text></view>
            <view>安全防护：<text class="score-value">{{ item.safetyScore }}</text></view>
            <view>整体体验：<text class="score-value">{{ item.experienceScore }}</text></view>
            <view>护理时长：<text class="score-value">{{ item.careDuration }}分钟</text></view>
            <view>护理数量：<text class="score-value">{{ item.careCount }}</text></view>
          </view>
          <view class="score-total">
            总分：<text class="score-total-value">{{ item.score }}</text>
          </view>
        </view>
      </view>
      <view v-else>
        <!-- 排行榜类型切换 -->
        <view class="rank-type-bar">
          <button :class="{active: rankType === 'score'}" @click="rankType = 'score'">得分排行</button>
          <button :class="{active: rankType === 'count'}" @click="rankType = 'count'">服务次数排行</button>
        </view>
        <!-- 我的信息表头 -->
        <view v-if="rankType === 'score'">
          <view v-if="scoreRankData?.hasMyself">
            <view class="myself-header">
              <text class="rank-num">{{ scoreRankData.myself.rank }}</text>
              <image :src="scoreRankData.myself.avatar" class="avatar"></image>
              <view class="name">{{ scoreRankData.myself.name }}</view>
              <view class="score">{{ scoreRankData.myself.score }}</view>
            </view>
          </view>
          <view v-else class="not-on-list">未上榜</view>
          <!-- 排行榜列表 -->
          <view v-for="item in scoreRankData?.scoreRankItemVOList" :key="item.userId" :class="['rank-item', item.isSelf ? 'self-highlight' : '']">
            <text class="rank-num">{{ item.rank }}</text>
            <image :src="item.avatar" class="avatar"></image>
            <view class="name">{{ item.name }}</view>
            <view class="score">{{ item.score }}</view>
          </view>
        </view>
        <view v-else>
          <view v-if="countRankData?.hasMyself">
            <view class="myself-header">
              <text class="rank-num">{{ countRankData.myself.rank }}</text>
              <image :src="countRankData.myself.avatar" class="avatar"></image>
              <view class="name">{{ countRankData.myself.name }}</view>
              <view class="score">{{ countRankData.myself.totalCount }}</view>
            </view>
          </view>
          <view v-else class="not-on-list">未上榜</view>
          <!-- 服务次数排行榜列表 -->
          <view v-for="item in countRankData?.countRankItemVOList" :key="item.userId" :class="['rank-item', item.isSelf ? 'self-highlight' : '']">
            <text class="rank-num">{{ item.rank }}</text>
            <image :src="item.avatar" class="avatar"></image>
            <view class="name">{{ item.name }}</view>
            <view class="score">{{ item.totalCount }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getMyScore, getScoreRank, getCareCountRank } from '@/api/user.js'
export default {
  data() {
    return {
      activeTab: 0, // 0: 我的得分, 1: 我的排行
      myScoreList: [],
      scoreRankData: {},
      countRankData: {},
      rankType: 'score', // 'score' or 'count'
      timeRangeType: 4, // 默认全部
      showAll: false
    }
  },
  async onLoad() {
    this.fetchMyScore();
    await this.fetchScoreRank();
    await this.fetchCountRank();
  },
  onReady() {
    setTimeout(() => {
      this.showAll = true;
    }, 50);
  },
  methods: {
    async fetchMyScore() {
      const res = await getMyScore({ timeRangeType: this.timeRangeType, page: 1, pageSize: 100 });
      this.myScoreList = res.data?.records || [];
    },
    async fetchScoreRank() {
      const res = await getScoreRank(this.timeRangeType);
      this.scoreRankData = res.data || {};
    },
    async fetchCountRank() {
      const res = await getCareCountRank(this.timeRangeType);
      this.countRankData = res.data || {};
    }
  },
  watch: {
    timeRangeType() {
      this.fetchMyScore();
      this.fetchScoreRank();
      this.fetchCountRank();
    }
  }
}
</script>

<style scoped>
.my-rankings-page { padding: 16px; }
.tab-bar { display: flex; }
.tab-btn { flex: 1; text-align: center; padding: 10px; }
.tab-btn.active { color: #5bb8ac; border-bottom: 2px solid #5bb8ac; }
.rank-type-bar { display: flex; margin: 10px 0; }
.rank-type-bar button { flex: 1; }
.rank-type-bar .active { background: #5bb8ac; color: #fff; }

/* 我的得分卡片美化 */
.score-item {
  margin-bottom: 22px;
  padding: 16px 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(91,184,172,0.13);
  border: 1.5px solid #b2e2db;
}
.score-item:first-of-type {
  margin-top: 20px;
}
.score-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.score-customer {
  font-weight: bold;
  color: #5bb8ac;
  font-size: 16px;
}
.score-time {
  color: #888;
  font-size: 12px;
}
.score-details {
  margin-bottom: 4px;
  color: #333;
  font-size: 14px;
}
.score-label {
  color: #888;
}
.score-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-bottom: 6px;
  font-size: 13px;
  color: #555;
}
.score-value {
  color: #5bb8ac;
  font-weight: bold;
}
.score-total {
  text-align: right;
  font-size: 15px;
  font-weight: bold;
  color: #333;
}
.score-total-value {
  color: #ffd966;
  font-size: 18px;
  margin-left: 4px;
}

.my-average-score {
  margin: 18px 0 10px 0;
  font-size: 16px;
  color: #333;
  text-align: center;
  font-weight: bold;
}
.avg-score-value {
  color: #5bb8ac;
  font-size: 20px;
  margin-left: 6px;
}

.myself-header {
  display: flex;
  align-items: center;
  background: #5bb8ac;
  color: #fff;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.myself-header .avatar { width: 40px; height: 40px; border-radius: 50%; margin: 0 10px; }
.myself-header .rank-num { font-size: 20px; font-weight: bold; margin-right: 10px; color: #fff; }
.myself-header .name { font-size: 16px; margin-right: 10px; }
.myself-header .score { font-size: 18px; color: #ffd966; margin-left: 24px; }
.not-on-list { color: #f56c6c; text-align: center; margin-bottom: 10px; }
.rank-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.rank-item .rank-num { width: 32px; text-align: center; font-size: 18px; color: #5bb8ac; }
.rank-item .avatar { width: 32px; height: 32px; border-radius: 50%; margin: 0 8px; }
.rank-item .name { flex: 1; }
.rank-item .score { font-size: 16px; color: #333; }
.rank-item.self-highlight { background: #f0f9eb; }
.fade-in-all {
  opacity: 0;
  transition: opacity 0.5s;
}
.fade-in-all.show {
  opacity: 1;
}
</style>